<!--
PivotalMySQLWeb

Copyright (c) 2017-Present Pivotal Software, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Pivotal MySQL*Web - Login</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <link rel="stylesheet" th:href="@{themes/bootstrap-darkly.css}" media="screen" />
    <link rel="stylesheet" th:href="@{themes/custom-darkly.min.css}" />

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        .navbar-brand
        {
            position: absolute;
            width: 100%;
            left: 0;
            margin: auto;
            margin-left: 48%;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-left">
                <a href="#">
                    <img src="images/PVLG-PivotalMYSQLWeb-SM.png"
                         th:src="@{images/PVLG-PivotalMYSQLWeb-SM.png}"
                         alt="Brand" />
                </a>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right  ">
                <li>
                    <a th:href="@{/home}">
                        <img src="images/b_home.png"
                             th:src="@{images/b_home.png}"
                             alt="Home"
                             border="0"/>
                        Home
                    </a>
                </li>
                <li>
                    <a th:href="@{/exit}">
                        <img src="images/s_loggoff.png"
                             th:src="@{images/s_loggoff.png}"
                             alt="Logout"
                             border="0"/>
                        Logout
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/b_usrlist.png"
                             th:src="@{images/b_usrlist.png}"
                             alt="Users"
                             border="0"/>
                        [User: <span th:text="${session.user} ? ${session.user} : 'Not Logged In'">Not Logged In</span>]
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
<!-- NAVBAR CODE END -->


<div class="bs-example">
    <div class="page-header">
        <h1>Pivotal MySQL*Web - <small>Login</small></h1>
    </div>
</div>

<div th:if="${loginerror != null}">
    <div class="alert alert-danger fade in">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Error!</strong> <span th:text="${loginerror}" />
    </div>
</div>

<div class="bs-example">
    <form th:action="@{/login}" method="post" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="control-label col-xs-2">Username</label>
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" id="username" name="username"
                           placeholder="Username" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-xs-2">Password</label>
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="password" class="form-control" id="password" name="password"
                           placeholder="Password" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="control-label col-xs-2">Url</label>
            <div class="col-xs-6">
                <input type="text" class="form-control" id="url" name="url"
                       placeholder="MySQL JDBC Url" />
                <span class="help-block">jdbc:mysql://localhost:3306/apples</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-log-in"></span> Login
                </button>
                <button type="reset" class="btn btn-primary">Reset</button>
            </div>
        </div>
    </form>
</div>

<div th:include="footer :: copy"></div>

</body>
</html>